<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
    <input type="hidden" id="id" name="id" value="${loginInfo.id}">
    <div class="layui-form-item">
        <label class="layui-form-label" for="username">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username" placeholder="请填写用户名" class="layui-input"
                   value="${loginInfo.username}" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="oldPwd"><span class="red">*</span>原密码</label>
        <div class="layui-input-block">
            <input type="password" name="oldPwd" id="oldPwd" placeholder="请填写原密码" class="layui-input"
                   lay-reqtext="请输入原密码"
                   lay-verify="required|check">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="password"><span class="red">*</span>新密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" id="password" placeholder="请填写新密码" class="layui-input"
                   lay-reqtext="请输入新密码"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="confirmPwd"><span class="red">*</span>确认密码</label>
        <div class="layui-input-block">
            <input type="password" name="confirmPwd" id="confirmPwd" placeholder="请再次输入新密码" class="layui-input"
                   lay-reqtext="请再次输入新密码"
                   lay-verify="required|confirm">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>
        </div>
    </div>
</form>
</body>
<script>
    const {form} = layui;
    $(function () {
        // 自定义验证规则
        form.verify({
            check: function (value) {
                let msg = "";
                $.ajax({
                    url: "userinfo/check/password",
                    method: "get",
                    data: {
                        id: $("#id").val(),
                        password: value
                    },
                    async: false,
                    success(res) {
                        if (res.code !== 200) {
                            msg = res.msg;
                        }
                    },
                    error(e) {
                        layer.alert("与服务器断开连接...", {icon: 5})
                        console.log(e)
                    }
                });
                if (msg) {
                    return msg;
                }
            },
            confirm(value) {
                if (value !== $("#password").val()) {
                    return "两次密码不一致！";
                }
            }
        });
        form.on("submit(submitBtn)", function (data) {
            ajax.post("userinfo/password", {id: data.field.id, password: data.field.password}).then(() => {
                layer.alert(`密码修改成功！请重新登录！`, {icon: 6}, function () {
                    closeWin();
                    top.location.href = 'logout';
                })
            })
            return false;
        })
    })

    function closeWin() {
        const index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }
</script>
</html>

